<template>
 <div>
    <img v-if="image" :src="image" alt="" :style="imgStyle">
    <div :style="imgStyle" v-show="showCrop">
      <vue-cropper ref="cropper" v-bind="option"></vue-cropper>
    </div>
    <div class="model" v-show="model" @click="model = false">
      <div class="model-show">
        <img :src="modelSrc" alt="">
      </div>
    </div>
    <el-button v-if="showCrop" type="primary" @click="preview" class="preview-btn">裁剪预览</el-button>
  </div>

</template>

<script>
import { VueCropper }  from 'vue-cropper' 
import { toNumber } from 'lodash'
export default {
  name: 'image',
  components: { VueCropper },
  props: {
    value: null,
    mode: {
      default: "edit",
    },
    url: {
      default: ''
    },
    watermarkContent: {
      default: ''
    },
    showWatermark: {
       default: false
    },
    watermarkColor: {
      default: 'rgba(255, 255, 255, 0.25)'
    },
    showCrop: {
       default: false
    },
    imageWidth: {
      default: 200
    },
    imageHeight: {
      default: 200
    },
    cropMode: {
       default: 'auto'
    },
    fixedNumber: {
      default: '2, 1'
    }
  },
  data () {
    return {
      image: '',
      option: {
        centerBox: true,
        autoCrop: true,
      },
      model: false,
      modelSrc: '',
    }
  },
  computed: {
    isDesigner() {
      return this.$attrs._source === 'designer'
    },
    mixEditable() {
      return !(this.$attrs.readonly || this.$attrs.disabled) && this.mode === "edit"
    },
    imgStyle() {
      return {
        width: this.imageWidth + 'px',
        height: this.imageHeight + 'px',
      }
    }
  },
  async mounted () {
    await this.handleAddWaterMarker()
    if (this.cropMode !== 'auto') {
      this.$set(this.option, 'fixed', true)
      if (this.fixedNumber) {
        const [width, height] = this.fixedNumber.split(',')
        const numbers = [toNumber(width), toNumber(height)]
        this.$set(this.option, 'fixedNumber', numbers)
      }
    }
    console.log(this.option)
  },
  methods: {
    async handleAddWaterMarker () {
      const content = this.watermarkContent
      const height = 80
      const width = 70
      const fontSize = 14

      const imageCon = new Image()
      imageCon.crossOrigin = 'anonymous'

      imageCon.onload = () => {
        const canvas = document.createElement('canvas')
        const ctx = canvas.getContext('2d')

        canvas.width = imageCon.width
        canvas.height = imageCon.height

        ctx.drawImage(imageCon, 0, 0, imageCon.width, imageCon.height)

        ctx.font = `${fontSize}px Microsoft Yahei`
        ctx.fillStyle = this.watermarkColor

        ctx.rotate(17 * Math.PI / 180)
        let i = 0
        let j = 0
        const waterMarkerWidth = content.length * fontSize
        for (i = 0; i < imageCon.width / (waterMarkerWidth + width); i++) {
          for (j = 0; j < imageCon.height / (height - 20); j++) {
            if (j === 0) {
              ctx.save() // 保存当前状态
              ctx.rotate(-17 * Math.PI / 180) // 将坐标系旋转回原始状态
              ctx.fillText(content, i * (waterMarkerWidth + width), -20, waterMarkerWidth + width)
              ctx.rotate(17 * Math.PI / 180) // 再次旋转画布
              ctx.restore() // 恢复之前的状态
            }
            ctx.fillText(content, i * (waterMarkerWidth + width), j * height - 100, waterMarkerWidth + width) // 向上移动 20 个像素
          }
        }

        ctx.rotate(-17 * Math.PI / 180)
        this.image = canvas.toDataURL('image/png')
        if (this.showCrop) this.$set(this.option, 'img', this.image)
      }
      imageCon.src = this.url
    },
    preview() {
      this.$refs.cropper.getCropData((data) => {
          this.model = true
          this.modelSrc = data
      })
    }
   }
};
</script>

<style scoped>
  .model {
      position: fixed;
      z-index: 10;
      width: 100vw;
      height: 100vh;
      overflow: auto;
      top: 0;
      left: 0;
      background: rgba(0, 0, 0, 0.8);
    }

    .model-show {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 100vw;
      height: 100vh;
    }

    .model img {
      display: block;
      margin: auto;
      max-width: 80%;
      user-select: none;
      background-position: 0px 0px, 10px 10px;
      background-size: 20px 20px;
      background-image: linear-gradient(45deg, #eee 25%, transparent 25%, transparent 75%, #eee 75%, #eee 100%), linear-gradient(45deg, #eee 25%, white 25%, white 75%, #eee 75%, #eee 100%);
    }
    .preview-btn {
      margin-top: 10px;
    }
</style>
